<template>
    <el-container class="cantainer-box">
        <el-header>
            <el-select v-model="paramForm.status" placeholder="请选择" style="width: 150px;margin-right: 10px;">
                <el-option v-for="item in statusTypeOption" :key="item.type" :value="item.type" :label="item.msg"></el-option>
            </el-select>
            <el-select v-model="paramForm.type" placeholder="请选择" style="width: 150px;margin-right: 10px;">
                <el-option v-for="item in statusWebTypeOption" :key="item.type" :value="item.type" :label="item.msg"></el-option>
            </el-select>
            

            <el-button type="primary" @click="refreshList">查询</el-button>
        </el-header>
        <el-main>


            <!-- 编辑弹窗 -->
            <el-dialog v-model="dialogFormVisible" title="菜单组" class="mkmember-dislog">
                <el-form :model="memeberData.mkMemberForm">
                    <el-form-item label="姓名" label-width="100px">
                        <el-input v-model="memeberData.mkMemberForm.username" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="账号" label-width="100px">
                        <el-input v-model="memeberData.mkMemberForm.mkUser" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="密码" label-width="100px">
                        <el-input v-model="memeberData.mkMemberForm.mkPwd" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="cookies" label-width="100px">
                        <el-input v-model="memeberData.mkMemberForm.mkCookies" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="用户id" label-width="100px">
                        <el-input v-model="memeberData.mkMemberForm.pid" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="examtypeid" label-width="100px">
                        <el-input v-model="memeberData.mkMemberForm.examtypeid" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="code" label-width="100px">
                        <el-input v-model="memeberData.mkMemberForm.code" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="pparms" label-width="100px">
                        <el-input v-model="memeberData.mkMemberForm.pparms" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="study" label-width="100px">
                        <el-input v-model="memeberData.mkMemberForm.study" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="mobile" label-width="100px">
                        <el-input v-model="memeberData.mkMemberForm.mobile" autocomplete="off" />
                    </el-form-item>
                    
                    <el-form-item label="是否启用刷题" label-width="100px">
                        <el-select v-model="memeberData.mkMemberForm.status" placeholder="请选择">
                            <el-option v-for="item in statusTypeOption" :key="item.type" :value="item.type" :label="item.msg"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属网址" label-width="100px">
                        <el-select v-model="memeberData.mkMemberForm.type" placeholder="请选择">
                            <el-option v-for="item in webTypeOption" :key="item.type" :value="item.type" :label="item.msg"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="sureSubmitMember">确定</el-button>
                </div>
                </template>
            </el-dialog>

            <div>
                <el-button type="primary" @click="addMkMember">添加</el-button>
            </div>
            <el-table :data="tableData.pageData.records" style="width: 100%">
                <el-table-column fixed="left" label="操作" min-width="50" v-slot="scope">
                    <el-button link type="primary" size="small" @click="editMkMember(scope.row)">修改</el-button>
                    <el-button link type="primary" v-if="scope.row.status == 1" size="small" @click="removeMkMember(scope.row,0)">取消用户会员</el-button>
                    <el-button link type="primary" v-if="scope.row.status == 0" size="small" @click="removeMkMember(scope.row,1)">开启用户会员</el-button>
                </el-table-column>

                <el-table-column prop="username" label="用户名" min-width="40"></el-table-column>
                <el-table-column prop="type" label="类型" min-width="30"></el-table-column>
                <el-table-column prop="mkUser" label="用户账号" min-width="70"></el-table-column>
                <el-table-column prop="mkPwd" label="密码" min-width="50"></el-table-column>
                
                
            </el-table>
        </el-main>
        <el-footer>
            <div class="demo-pagination-block">
                <el-pagination
                    v-model:current-page="tableData.pageData.pageNum"
                    v-model:page-size="tableData.pageData.pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :size="size"
                    :disabled="disabled"
                    :background="background"
                    layout="total,sizes, prev, pager, next"
                    :total="tableData.pageData.recordsTotal"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </el-footer>
    </el-container>

</template>

<script setup lang="ts" name="MkEveryDayStatus">


import { ref,reactive, onMounted } from 'vue'
import { memberListApi,updateMemberApi,addMemberApi } from '@/http/api/mk/mkMember';
import { type MyResponseType } from '@/bean/base/response';
import { MyPageData, MyPageResponseType } from '@/bean/base/page';
import { MkMember,MkMemberData } from '@/bean/mk/MkMember';
import type { ComponentSize  } from 'element-plus';
import { ElMessage } from 'element-plus';


const dialogFormVisible = ref(false);

const statusTypeOption = [
    {type:1,msg:"正常用户"},
    {type:0,msg:"停止会员用户"}
];

const webTypeOption = [
    {type:1,msg:"http://www.pbaqks.com"},
    {type:2,msg:"http://219.145.103.126"},
    {type:3,msg:"http://pxserver.hckwj.com"},
];

const statusWebTypeOption = [
    {type:null,msg:"全部"},
    {type:1,msg:"网站1"},
    {type:2,msg:"网站2"},
    {type:3,msg:"网站3"}
];

const paramForm = reactive({
    pageNum: 1,
    pageSize: 10,
    status : 1,
    type:null,
})

const memeberData = reactive(new MkMemberData());


let tableData = reactive(new MyPageData<MkMember>());


onMounted(() => {
    refreshList();
})

//获取页面数据
async function refreshList() {
    memberListApi(paramForm).then((res:MyResponseType<MyPageResponseType<MkMember>>)=>{
        tableData.pageData = res.data;
    });
}

function addMkMember() {
    memeberData.mkMemberForm = new MkMemberData().mkMemberForm;
    dialogFormVisible.value = true;
}

//修改-取消用户会员
function editMkMember(item:MkMember) {
    memeberData.mkMemberForm = item;
    dialogFormVisible.value = true;
}

function removeMkMember(item:MkMember,status:number) {
    item.status = status;
    updateMemberApi(item).then((res)=>{
        if(res.code != 200) return;
        ElMessage({
            message: "操作成功",
            type: 'success',
        })
        refreshList();
    });
}

function sureSubmitMember() {
    if(memeberData.mkMemberForm.id == null) {
        addMemberApi(memeberData.mkMemberForm).then((res)=>{
            if(res.code != 200) return;
            ElMessage({
                message: "操作成功",
                type: 'success',
            })
            dialogFormVisible.value = false;
            refreshList();
        });
        
    } else {
        updateMemberApi(memeberData.mkMemberForm).then((res)=>{
            if(res.code != 200) return;
            ElMessage({
                message: "操作成功",
                type: 'success',
            })
            dialogFormVisible.value = false;
            refreshList();
        });
    }
}




const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
    paramForm.pageSize = val;
    refreshList();
}
const handleCurrentChange = (val: number) => {
    paramForm.pageNum = val;
    refreshList();
}

</script>

<style scoped>
.default-table-box,.el-container {
  width: 100%;
  height: 100%;
}

.el-footer {
    height: 80px;
}
    
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.mkmember-dislog{
    width: 90%;
    max-width: 500px;
    min-width: 300px;
}

</style>